<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>

import * as echarts from 'echarts'

const animationDuration = 2000

export default {
  name: "two",
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '1500px'
    },
    height: {
      type: String,
      default: '750px'
    }
  },
  data() {
    return {
      // 查询参数
      params: {
        monthCnt: -10
      },
      chart: null,
      chartTimer: null,
      chartData: {
        month: '2023-05',
        manaOrgName: ["中国建设银行", "中国银行", "湖北银行", "交通银行", "中国工商银行", "中国邮政储蓄银行", "武汉农村商业银行", "平安银行", "招商银行", "汉口银行"],
        checkSuccNum: [107169, 77002, 54424, 33062, 30845, 29325, 22121, 20508, 20438, 118661],
        batchCheckSuccNum: [0, 4, 317, 249, 354, 0, 0, 1129, 0, 62],
        victimProtSuccNum: [44303, 38599, 47203, 44660, 35026, 0, 50615, 51415, 1890, 34890]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })

    this.getChartData()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },

    getChartData() {
      this.chartTimer = setInterval(() => {
        this.setOptions(this.chartData)
      }, 10 * 1000)
    },

    setOptions({month, manaOrgName, checkSuccNum, batchCheckSuccNum, victimProtSuccNum} = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        title: {
          text: month,
          textStyle: {
            color: '#000',
            fontSize: 40
          }
        },
        grid: {
          top: '3%',
          left: '1%',
          right: '1%',
          bottom: '3%',
          containLabel: true,
          borderColor: '#ffffff'
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          name: '机构名称',
          type: 'category',
          //key文字大小
          nameTextStyle: {
            fontSize: 20,
            color: '#000',
          },
          axisLabel: {
            formatter: "{value} ",
            textStyle: {
              fontSize: 17,//字体大小
              color: '#000'
            }
          },
          data: manaOrgName,
          inverse: true,
          splitLine: {show: false},
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          //key和图间距
          offset: 10,
          //动画部分
          animationDuration: animationDuration,
          animationDurationUpdate: animationDuration,

        },
        series: [
          {
            name: '实时核查笔数',
            realtimeSort: true, //是否开启该系列的实时排序
            //seriesLayoutBy: "column", //指定如何对应dataset中的数据
            type: 'bar',
            stack: 'total',
            label: {
              position: 'inside',
              show: true,
              color: '#000'
            },
            emphasis: {
              focus: 'series'
            },
            data: checkSuccNum,
            smooth: true,
            valueAnimation: true,
            barWidth: 40,
            barGap: 10,
            itemStyle: {
              emphasis: {
                barBorderRadius: 15,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 15,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  {offset: 0, color: "#235ec7"},
                  {offset: 1, color: "#52bef5"},
                ]),
              },
            }
          }
        ],
        //动画部分
        animationDuration: 0,
        animationDurationUpdate: animationDuration,
        animationEasingUpdate: "linear", //数据更新动画缓动效果
        animationEasing: 'linear'
      })
    }
  }
}
</script>

<style scoped>

</style>
